<!-- 首页 -->
<style>
    .outer{
     
      width: 100%;
    }
    .up{
      
      width:100%;
      height: 140px;
      justify-content: space-around;
      /* box-sizing: content-box;  */
      display: flex;
    }
    .bottom {
      display: flex;
      /* justify-content: space-around; */
    
    }
    .up>div{
      /* width: 350px; */
      flex: 1 ;
      height: 100px;
      border: 1px solid rgb(235, 227, 227);
      /* display: inline-block; */
      display: flex;
      /* margin-top: 15px; */
      margin: 15px;
      
      
    }
    .up img{
      width: 50px;
      height: 50px;
      margin: 24px 20px;
      
    }
    .up p:first-child{
      margin-top: 25px;
      margin-left: 70px;
      color: rgb(122, 116, 116);
      font-size: 18px;
      font-weight: bold;
    }
    .up p:last-child{
      margin-top: 10px;
      margin-left: 100px;
      font-size: 17px;
    }
    .bottom img{
        width: 365px;
        height: 120px;
        
    }
    .bottom>div{
        /* display: flex;s */
      width: 450px;
      height: 440px;
      border: 1px solid rgb(212, 204, 204);
      margin: 30px;
      overflow: hidden;
    }
    .bottom p{
        border-bottom: 1px solid rgb(204, 198, 198);
        text-align: center;
         margin: 0;
         height: 40px;
         line-height: 3;
    }
    .bottom p:hover{
        background-color: rgb(245, 237, 237);
        cursor: pointer;
    }
    
    
 </style>
 <div class="outer">
     <div class="up">
        <div >
          <div class="img">
           <img src="./images/images/1.png" >
          </div>
          <div class="p"> 
             <p>校内新闻</p>
             <p>20</p>
          </div>
        </div>
        <div>
          <img src="./images/images/3.png" >
          <div>
           <p>通知公告</p>
           <p>20</p>
        </div>
        </div>
        <div>
          <img src="./images/images/2.png" >
          <div>
           <p>学术活动</p>
           <p>30</p>
        </div>
        </div>
        <div>
          <img src="./images/images/4.png" >
          <div>
           <p>媒体聚焦</p>
           <p>84</p>
        </div>
        </div>
     </div>
     <div class="bottom">
       <div class="news">
         <div><img src="./images/images/11.jpg" ></div>
          <p>校园新闻</p>
          
       </div>
       <div class="inform">
         <div >
           <img src="./images/images/22.jpg"  >
         </div>
         <p>通知公告</p>
       </div>
       <div class="active">
         <div>
           <img src="./images/images/33.jpg" >
         </div>
         <p>学术活动</p>
       </div>
     </div>
 </div>
 <script>
     //发送请求 获取信息
     $.ajax({
         url:"http://182.92.164.74:8002/article/cascadeFindAll",
         type:"get",
         headers:{
             "Authorization":sessionStorage.getItem("token")
         },
         success:function(data){
            var user=data.data
            user.forEach((item)=>{
                
                
                if(item.category.name=="2"){
                    $(".news").append(`<p>`+item.title+`</p>`)
                }else if(item.category.name=="通知公告"){
                    $(".inform").append(`<p>`+item.title+`</p>`)
                }else if(item.category.name=="学术活动"){
                    $(".active").append(`<p>`+item.title+`</p>`)
                }
                
            })
         }
     })
 </script>